<template>
  <div class="super-order">
    <table>
      <tr>
        <th>时间</th>
        <th>物品</th>
        <th>数量</th>
        <th>金额</th>
      </tr>
      <tr v-for="(item,index) in 8" :key="index">
        <td>12-22</td>
        <td>物品{{ index+1 }}</td>
        <td>{{ count() }}</td>
        <td>{{ price() }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  methods: {
    count() {
      return Math.round(Math.random() * 10) + 20
    },
    price() {
      return Math.round(Math.random() * 100) + 1000
    }
  }
}
</script>

<style lang="scss" scoped>
.super-order {
  table {
    border-collapse:collapse;
    border-spacing:0;

    tr{
      border: 1px solid #33416b;
    }

    th,td{
      padding: 12px 18px;
    }
  }
}
</style>
